<template>
    <div class="echarts" ref="echarts" :style="{ minHeight: '100px' }">
    </div>
</template>
<script>
export default {
    name: 'Areas',
    props: {
        // 类型
        type: {
            type: String,
            default: () => ''
        },
        /** 包含
         *  markLine：{
         *  label:'',// 名称
         *  value:'',// 固定值
         * }
         * 
        */
        // 一些配置项
        setting: {
            type: Object,
            default: () => { }
        },
        // 数据
        data: {
            type: [Object, Array],
            default: () => [],
        },
    },
    data() {
        return {
            timesName: null
        }
    },
    // created() {
    // },
    methods: {
        echartInit() {
            var myChart = this.$echarts.init(this.$refs.echarts);
            let type = this.type;
            var option = {
                // 图例位置
                legend: {},
                tooltip: {
                    trigger: 'axis', // 触发类型：坐标轴触发
                    // axisPointer: {
                    //     type: 'cross' // 十字准线指示器，显示指示线的样式
                    // }
                },
                // 图像大小
                grid: {
                    left: '0%',
                    right: '0%',
                    bottom: '0%',
                    top: '0%',
                    containLabel: true
                },
                textStyle: {
                    color: "#ffffff"
                },
                xAxis: {
                    type: type,
                    boundaryGap: true,
                    data: this.getSplitData.label,
                    label: true,
                    axisLabel: {
                        color: '#C5C0BF',
                        fontSize: '6',
                    },
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#C5C0BF',
                        fontSize: '8',
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dashed',
                            color: '#FFFFFF00',
                        },
                        show: true,
                    },
                },
                series: [{
                    type: 'line',
                    // 平滑曲线
                    smooth: true,
                    itemStyle: {
                        normal: {
                            color: '#60C0DD',
                        }
                    },
                    lineStyle: {
                        shadowColor: '#666666',
                        shadowOffsetY: 2
                    },
                    label: {
                        show: true
                    },
                    data: this.getSplitData.value,
                    // 面积阴影样式
                    areaStyle: {
                        // 使用方法二的写法
                        color: {
                            type: 'linear',
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#65E6FF3D' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#65E6FF00' // 100% 处的颜色
                                }
                            ]
                        },
                    },
                    // emphasis: {
                    //     itemStyle: {
                    //         shadowBlur: 5,
                    //         shadowOffsetX: 0,
                    //         // shadowColor: 'pink',
                    //         borderColor: 'rgba(0, 255, 194, 0.55)',
                    //         color: 'rgba(0, 255, 194, 0.55)',
                    //     },
                    // },
                    // 警示线
                    // markLine: {
                    //     data: [
                    //     ],
                    //     lineStyle: {
                    //         color: '#FCC31F',
                    //         type: 'dotted', // 设置为虚线
                    //         // 鼠标悬停样式
                    //         emphasis: {
                    //             type: 'dotted' // 鼠标悬浮时线变为实线
                    //         }
                    //     },
                    //     label: {
                    //         show: true,
                    //         color: '#ffffff',
                    //         formatter: (a) => {
                    //             return `${a.name}:${a.value}`;
                    //         },
                    //         position: 'insideMiddleTop',
                    //         backgroundColor: {
                    //             image: img,
                    //             repeat: 'no-repeat',
                    //         },
                    //         symbol: ['none', 'none'],
                    //         padding: [6, 6, 6, 6]
                    //     },
                    //     // 不要起始点样式
                    //     symbol: ['none', 'none'],
                    // },
                    symbol: 'none',
                }]
            };
            if (this.setting && Object.keys(this.setting).length > 0) {
                if (this.setting.color) {
                }
                if (this.setting.grid) {
                    option['grid'] = {
                        ...option['grid'],
                        ...this.setting.grid,
                    }
                }
            }
            myChart.setOption(option);
        },
        // 重新计算
        onResizeChange() {
            var myChart = this.$echarts.init(this.$refs.echarts);
            myChart.resize();
        }
    },
    mounted() {
        // 解决页面不聚焦的时候柱形图丢失问题
        this.timesName = setInterval(() => {
            this.echartInit();
        }, 2000)
    },
    // watch: {
    //     data(newVal, oldVal) {
    //         // 当 parentData 变化时，这个函数会被调用
    //         this.echartInit();
    //     }
    // },
    computed: {
        // data里面包含 label value
        getSplitData() {
            let arr = {
                label: [],
                value: [],
            };
            this.data.filter((val, index) => {
                arr['label'].push(val.label || val.name);
                arr['value'].push(Number(val.value || val.num));
            })
            return arr
        },
    },
    // 销毁
    beforeDestroy() {
        clearInterval(this.timesName);
        this.timesName = null;
    }
}
</script>
<style lang="less" scoped>
.echarts {
    width: 100%;
    height: 100%;
}
</style>